// todo 1. yarn add redux
// todo 2. 导入createStore

import { applyMiddleware, createStore } from 'redux'
// ? 这个就是中间件
import logger from 'redux-logger'
// ? 处理异步请求的中间件
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'

// 管理者发布指令, 交给执行者, 去修改状态
// 将来store派发action 交给reducer 执行修改状态!!!

// ===>>> 执行者 干活者
// reducer 会获得上一次的状态, 结合传入的action对象, 去执行对应的代码,生成新的状态 替换老状态
// 必须是纯函数!!!  不能直接改变原来的状态
const reducer = (
  state = {
    username: '张三',
    token: '123456',
  },
  action
) => {
  // 首次自动触发, 分配一个随机的type类型, 目的就是为了得到初始状态(自己触发了reducer, 并且随机分配了一个state)
  //! 并且return state 不能省略 随机的type类型就可以默认返回初始状态
  // console.log(state, action)

  // 将来我们修改仓库中的state, 是通过一个action对象 => 命令 指令
  // type是必须的!!! plyload是可选的
  //{type: 'setUsername', payload:  '李四'
  //{type: 'setToken', payload:  '4567'
  if (action.type === 'setUsername') {
    // 修改username
    // 将来修改数据, 返回一个新数据替换原数据
    return {
      ...state,
      username: action.payload,
    }
  }
  if (action.type === 'setToken') {
    // 修改username
    // 将来修改数据, 返回一个新数据替换原数据
    return {
      ...state,
      token: action.payload,
    }
  }

  return state
}

// 处理所有状态更新时 统一加一个前缀abc
const myPrefixMiddleware = (store) => {
  return (next) => {
    return (action) => {
      /* 此处编写中间件的具体逻辑 */
      action.payload = 'abc' + action.payload

      // 执行下一个中间件函数, 或没有更多中间件就执行 reducer 函数
      return next(action)
    }
  }
}

const myPrefixMiddleware2 = (store) => {
  return (next) => {
    return (action) => {
      /* 此处编写中间件的具体逻辑 */
      action.payload = action.payload + 'abc'

      // 执行下一个中间件函数, 或没有更多中间件就执行 reducer 函数
      return next(action)
    }
  }
}

export default createStore(
  reducer,
  composeWithDevTools(
    applyMiddleware(myPrefixMiddleware, myPrefixMiddleware2, logger, thunk)
  )
)
